const query = {
  pagenum: 1, // 是	int	页码值
  pagesize: 3, // 是	int	每页显示多少条数据
  cate_id: "", // "" 所有的文章分类 否	string	文章分类的 Id
  state: "", // "" 所有状态 文章状态  可选值有：已发布、草稿
};

const form = layui.form;
const layer = layui.layer;
// 获取文章列表
getList()
function getList() {
  //文章列表
  axios.get("/my/article/list", {
    params: query
  }).then(({ data: { total, data } }) => {
    const newArr = data.map(({ title, cate_name, pub_date, state, Id }) => {
      return `
                    <tr>
                        <td>${title}</td>
                        <td>${cate_name}</td>
                        <td>${pub_date}</td>
                        <td>${state}</td>
                        <td>
                            <button type="button" data-id="${Id}" class="layui-btn layui-btn-xs btn_edit">编辑</button>
                            <button type="button" data-id="${Id}" class="layui-btn layui-btn-xs layui-btn-danger btn_delete">删除</button>
                        </td>
                    </tr>
      `
    }).join('')
    $('#list').html(newArr)
    // 调用函数，来处理分页渲染
    renderPage(total)
  })
}

//获取下拉框的分类数据
axios.get("/my/article/cates").then(({ data: { data } }) => {
  const newArr = data.map(({ Id, name }) => {
    return `<option value='${Id}'>${name}</option>`
  }).join('')
  $("#cateSelect").append(newArr)
  form.render('select'); //刷新select选择框渲染
})

//实现筛选功能
$('#form').on('submit', function (e) {
  e.preventDefault()
  //还需要修改query对象的数据
  query.cate_id = $('#cateSelect').val()
  query.state = $('#stateSelect').val()
  //当筛选的时候，从第1页开始
  query.pagenum = 1
  //发送ajax请求获取对应的数据
  getList()
})

//分页功能
const laypage = layui.laypage
function renderPage(total) {
  // 执行一个laypage实例
  laypage.render({
    elem: 'page-box', // 注意，这里的 page-box 是 ID，不用加 # 号
    count: total, // 数据总数，从服务端得到
    curr: query.pagenum, // 起始页，从query对象中可以获取到
    limit: query.pagesize, // 每页条数，从query对象中可以获取到
    limits: [1, 3, 5, 7, 9],
    layout: ["count", "limit", "prev", "page", "next", "skip"],
    jump: function (obj, first) {
      //obj包含了当前分页的所有参数，比如：
      // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit); //得到每页显示的条数
      query.pagenum = obj.curr
      //首次不执行
      if (!first) {
        //do something
        getList()
      }
    }
  });
}

//删除功能
$('#list').on('click', '.btn_delete', function () {
  const id = $(this).attr('data-id')
  layer.confirm("确定要删除?", { icon: 3, title: "提示" }, function (index) {
    axios.get("/my/article/delete/" + id).then((res) => {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      if ($('.btn_delete').length === 1) {
        query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1
      }
      layer.msg(res.data.message)
      layer.close(index)
      getList()
    })
  })
})

//删除功能2
// $('#list').on('click', '.btn_delete', function () {
//   const id = $(this).attr('data-id')
//   layer.confirm("确定要删除?", { icon: 3, title: "提示" }, function (index) {
//     axios.get('/my/article/delete/' + id).then((res) => {
//       if (res.data.status !== 0) {
//         return layer.msg(res.data.message)
//       }
//       if($('.btn_delete').length === 1){
//        if(query.pagenum === 1){
//         query.pagenum = 1
//        }else {
//         query.pagenum = query.pagenum - 1
//        }
//         // query.pagenum = query.pagenum === 1 ? 1 :query.pagenum -1 
//       }
//       layer.msg(res.data.message)
//       layer.close(index)
//       getList()
//     })
//   })
// })

// 编辑功能
$('#list').on('click', '.btn_edit', function () {
  const id = $(this).attr('data-id')
  location.href = '/article/art_edit.html?id=' + id
})